<template>
  <div class="info">
    <div class="info-search">
      <van-search v-model="search" @search="handelSearch" placeholder="请输入搜索内容" />
    </div>
    <div class="content">
      <div class="informationCenter">
        <div class="informationCenter_title">
          <div class="title_text">信息中心</div>
        </div>
        <div class="informationCenter_list" v-if="list.length < 5" ref="informationCenter_list">
          <div class="item" v-for="(item, index) in list" :key="index" @click="goList(item)">
            <img class="item-icon" src="@/assets/info_icon.png" alt="" />
            <div class="item-text">{{ item.title }}</div>
          </div>
        </div>
        <div class="informationCenter_list1" v-if="list.length >= 5 && !isMore" ref="informationCenter_list1">
          <div class="item" v-for="(item, index) in list.slice(0, 5)" :key="index" @click="goList(item)">
            <img class="item-icon" src="@/assets/info_icon.png" alt="" />
            <div class="item-text">{{ item.title }}</div>
          </div>
          <div class="viewMore" v-if="list.length >= 5" @click="toggleMore">
            <img class="viewMore_icon" src="@/assets/xiajiantou.png" alt="" />
            <div class="viewMore_text">查看更多</div>
          </div>
        </div>
        <div class="informationCenter_list2" v-if="list.length >= 5 && isMore" @scroll="handleScroll" ref="informationCenter_list2">
          <div class="item" v-for="(item, index) in list" :key="index" @click="goList(item)">
            <img class="item-icon" src="@/assets/info_icon.png" alt="" />
            <div class="item-text">{{ item.title }}</div>
          </div>
          <div class="viewMore" v-if="list.length >= 5" @click="toggleMore">
            <img class="viewMore_icon" src="@/assets/shangjiantou.png" alt="" />
            <div class="viewMore_text">收起更多</div>
          </div>
        </div>
        <div class="informationCenter_list" v-if="list.length === 0" ref="informationCenter_list3">
          <div class="eity">没有更多数据了</div>
        </div>
        <div ref="zhangao"></div>
      </div>
      <div class="fillInFeedback" v-if="!isMore && !isListScress">
        <div class="fillInFeedback_title">
          <div class="title_text">填写反馈</div>
        </div>
        <div class="fillInFeedback_list" ref="fillInFeedback_list">
          <div class="type-wrapper" @click="show = true">
            <p :class="{ already: type }">
              {{ type.title ? type.title : "请选择问题类型" }}
            </p>
            <img src="@/assets/icon_06.png" alt="" class="icon" />
          </div>
          <div class="desc-wrapper">
            <textarea class="desc" placeholder="请输入问题内容" v-model="desc"></textarea>
          </div>
        </div>
        <div ref="zhangao1"></div>
      </div>

      <div class="btn-wrapper" @click="submit" v-if="!isMore && !isListScress">
        发布
      </div>
      <div class="btn-wrapper" @click="goHelp" v-if="!isMore && !isListScress">
        查看已发布的反馈
      </div>
    </div>

    <van-popup v-model="show" position="bottom">
      <van-picker title="填写反馈" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
export default {
  name: "newInfo",
  data() {
    return {
      search: "", //搜索
      list: [], //列表
      page: 1,
      total: 0,
      isMore: false, //是否查看更多
      isListScress: false, //判断是否请求列表成功
      desc: "",
      type: {},
      show: false,
      typeList: [],
      columns: [],
    };
  },
  async mounted() {
    await this.getList();
    await this.setHeight();
    await this.getHelpCates();
  },
  methods: {
    //搜索
    handelSearch(val) {
      this.page = 0;
      this.list = [];
      this.getList();
    },
    //获取信息中心列表
    async getList() {
      this.isListScress = true;
      let tld = Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        let res = await this.$api.infoCates({ page: this.page, key: this.search });
        console.log(res);
        if (res.status_code != 200) {
          Toast(res.message);
          return;
        }
        this.list = [...this.list, ...res.data.data];
        this.total = res.data.total;
        tld.clear();
        this.isListScress = false;
        this.setHeight();
      } catch (error) {
        tld.clear();
        this.isListScress = false;
      }
    },

    //滚动到底加载
    handleScroll(e) {
      const scrollTop = e.target.scrollTop;
      const scrollHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.page < Math.ceil(this.total / 10)) {
          this.page++;
          this.getList();
        } else {
          Toast.success({
            message: "没有更多了",
            duration: 1500,
          });
        }
      }
    },
    //赋值占位空间
    setHeight() {
      //信息中心占高
      this.$nextTick(() => {
        if (this.list.length < 5) {
          this.$refs.zhangao.style.height = this.$refs.informationCenter_list.offsetHeight - 10 + "px";
        } else if (this.list.length >= 5 && !this.isMore) {
          this.$refs.zhangao.style.height = this.$refs.informationCenter_list1.offsetHeight - 10 + "px";
        }
        //  else if (this.list.length >= 5 && this.isMore) {
        //   this.$refs.zhangao.style.height = this.$refs.informationCenter_list2.offsetHeight - 10 + "px";
        // }
        else if (this.list.length === 0) {
          //获取listContainer的高度 赋值给 zhangao
          this.$refs.zhangao.style.height = this.$refs.informationCenter_list3.offsetHeight - 10 + "px";
        }

        // 填写反馈占高
        this.$nextTick(() => {
          this.$refs.zhangao1.style.height = this.$refs.fillInFeedback_list.offsetHeight - 10 + "px";
        });
      });
    },

    //切换查看收起
    toggleMore() {
      this.isMore = !this.isMore;
      this.setHeight();
    },

    //去信息列表
    goList(item) {
      this.$router.push({
        path: "/infoList",
        query: {
          id: item.id,
        },
      });
    },

    //获取问题类型
    getHelpCates() {
      this.$api.cates().then((res) => {
        if (res.status_code == 200) {
          this.typeList = res.data;
          this.columns = res.data.map((item) => item.title);
        }
      });
    },

    //选择问题类型
    onConfirm(value, index) {
      this.type = this.typeList[index];
      this.show = false;
    },
    //关闭选择问题类型
    onCancel() {
      this.show = false;
    },
    submit() {
      if (!this.type.title) {
        Toast({ message: "请先选择问题类型" });
        return;
      }
      if (!this.desc) {
        Toast({ message: "请先输入问题内容" });
        return;
      }
      Toast.loading({
        message: "发布中...",
        forbidClick: true,
        duration: 0,
      });
      this.$api
        .store({
          title: this.desc,
          cate_id: this.type.id,
        })
        .then((res) => {
          this.desc = "";
          this.type = {};
          Toast.clear();
          if (res.status_code == 200) {
            Toast({ message: "发布成功" });
          } else {
            Toast({ message: res.message });
          }
        });
    },
    goHelp() {
      this.$router.push({
        path: "/newHelp",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
  .info {
    height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
    height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
  }
}

.info {
  background-color: #f8f8f8;
  z-index: 2;

  .info-search {
    height: 1.7067rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .van-search {
      width: 100%;
      height: 1.0133rem;
    }

    ::v-deep .van-search__content {
      height: 1.0133rem;
      line-height: 1.0133rem;
      background-color: #f5f5f5;
      border-radius: 0.5067rem;
    }

    ::v-deep .van-field__body {
      height: 100%;
    }

    ::v-deep .van-field__left-icon {
      margin-top: 0.0667rem;
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 1.7067rem);
    padding: 0 0.2667rem;
    overflow: auto;

    .informationCenter {
      position: relative;
      margin-top: 0.4rem;

      .informationCenter_title {
        width: 100%;
        height: 2rem;
        background-image: url("~@/assets/info_bg1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 0.3333rem;
        padding-left: 0.3333rem;

        .title_text {
          font-weight: bold;
          font-size: 0.4533rem;
          color: #ffffff;
        }
      }

      .informationCenter_list {
        width: 100%;
        position: absolute;
        left: 0;
        top: 1.1467rem;
        height: fit-content;
        background: #ffffff;
        border-radius: 0.2667rem;
        padding: 0 0.4rem;
      }

      .informationCenter_list1 {
        width: 100%;
        position: absolute;
        left: 0;
        top: 1.1467rem;
        background: #ffffff;
        border-radius: 0.2667rem;
        padding: 0 0.4rem;
        height: 9.0933rem;
      }

      .informationCenter_list2 {
        width: 100%;
        height: calc(100vh - 4.8533rem);
        position: absolute;
        left: 0;
        top: 1.1467rem;
        background: #ffffff;
        border-radius: 0.2667rem;
        padding: 0 0.4rem;
        overflow: auto;
      }

      .item {
        margin: 0.5333rem 0;
        display: flex;
        align-items: center;

        .item-icon {
          width: 1.0133rem;
          height: 1.0133rem;
          margin-right: 0.4rem;
        }

        .item-text {
          font-weight: bold;
          font-size: 0.3733rem;
          color: #323232;
        }
      }

      .viewMore {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5333rem;

        .viewMore_icon {
          width: 0.2533rem;
          height: 0.16rem;
          margin-right: 0.2667rem;
        }

        .viewMore_text {
          font-weight: 500;
          font-size: 0.32rem;
          color: #2d2d2d;
        }
      }
    }

    .eity {
      text-align: center;
      font-size: 0.32rem;
      color: #999999;
      padding: 0.2667rem;
      margin: 0.5333rem 0;
    }

    .fillInFeedback {
      position: relative;

      .fillInFeedback_title {
        width: 100%;
        height: 2rem;
        background-image: url("~@/assets/info_bg2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-top: 0.3333rem;
        padding-left: 0.3333rem;

        .title_text {
          font-weight: bold;
          font-size: 0.4533rem;
          color: #ffffff;
        }
      }

      .fillInFeedback_list {
        width: 100%;
        position: absolute;
        left: 0;
        top: 1.1467rem;
        background: #ffffff;
        border-radius: 0.2667rem;
        padding: 0.4rem 0.2667rem;
        height: 6.88rem;

        .type-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.4rem 0.2667rem;
          height: 1.1467rem;
          background: #f4f4f4;
          border-radius: 0.32rem;
          margin-bottom: 0.4rem;
          p {
            font-size: 0.3733rem;
            font-weight: 500;
            color: #919191;
            &.already {
              color: #333;
            }
          }

          .icon {
            width: 0.2133rem;
            height: 0.1733rem;
          }
        }

        .desc-wrapper {
          height: 4.6667rem;
          background: #f4f4f4;
          border-radius: 0.32rem;
          padding: 0.4rem 0.2667rem;
          .desc {
            width: 100%;
            height: 100%;
            background-color: transparent;
            border: none;
            line-height: 0.5333rem;
            font-size: 0.3733rem;
            font-weight: 500;
          }
        }
      }
    }

    .btn-wrapper {
      height: 1.2rem;
      background: #2a4347;
      border-radius: 0.2667rem;
      margin-bottom: 0.6667rem;
      font-weight: 500;
      font-size: 0.4267rem;
      color: #ffffff;
      line-height: 1.2rem;
      text-align: center;
    }
  }
}
</style>
